<template>
	<div>
		<el-card
			class="box-card"
			:style="{background:color}"
		>
			<div
				slot="header"
				class="clearfix setFlex"
			>
				<el-tag>{{title}}</el-tag>
				<div class="block">
					<el-tooltip
						class="item"
						effect="dark"
						content="更改背景色"
						placement="top-end"
					>
						<el-color-picker
							v-model="color"
                            size="mini"
							show-alpha
						></el-color-picker>
					</el-tooltip>
				</div>
			</div>
			<div
				id="area-stack-gradient"
				class="chart"
			></div>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: "JBDDMJT",
		data() {
			return {
				title: "当前显示：渐变堆叠面积图组件",
				color: "#FFFFFF",
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart();
			});
		},
		methods: {
			initChart() {
				this.chart = this.$echarts.init(
					document.getElementById("area-stack-gradient"),
					"area-stack-gradient"
				);
				let option = {
					color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
					title: {
						text: "",
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "cross",
							label: {
								backgroundColor: "#6a7985",
							},
						},
					},
					legend: {
						data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"],
					},
					toolbox: {
						feature: {
							saveAsImage: {},
						},
					},
					grid: {
						left: "3%",
						right: "4%",
						bottom: "3%",
						containLabel: true,
					},
					xAxis: [
						{
							type: "category",
							boundaryGap: false,
							data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
						},
					],
					yAxis: [
						{
							type: "value",
						},
					],
					series: [
						{
							name: "Line 1",
							type: "line",
							stack: "总量",
							smooth: true,
							lineStyle: {
								width: 0,
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.8,
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "rgba(128, 255, 165)",
									},
									{
										offset: 1,
										color: "rgba(1, 191, 236)",
									},
								]),
							},
							emphasis: {
								focus: "series",
							},
							data: [140, 232, 101, 264, 90, 340, 250],
						},
						{
							name: "Line 2",
							type: "line",
							stack: "总量",
							smooth: true,
							lineStyle: {
								width: 0,
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.8,
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "rgba(0, 221, 255)",
									},
									{
										offset: 1,
										color: "rgba(77, 119, 255)",
									},
								]),
							},
							emphasis: {
								focus: "series",
							},
							data: [120, 282, 111, 234, 220, 340, 310],
						},
						{
							name: "Line 3",
							type: "line",
							stack: "总量",
							smooth: true,
							lineStyle: {
								width: 0,
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.8,
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "rgba(55, 162, 255)",
									},
									{
										offset: 1,
										color: "rgba(116, 21, 219)",
									},
								]),
							},
							emphasis: {
								focus: "series",
							},
							data: [320, 132, 201, 334, 190, 130, 220],
						},
						{
							name: "Line 4",
							type: "line",
							stack: "总量",
							smooth: true,
							lineStyle: {
								width: 0,
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.8,
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "rgba(255, 0, 135)",
									},
									{
										offset: 1,
										color: "rgba(135, 0, 157)",
									},
								]),
							},
							emphasis: {
								focus: "series",
							},
							data: [220, 402, 231, 134, 190, 230, 120],
						},
						{
							name: "Line 5",
							type: "line",
							stack: "总量",
							smooth: true,
							lineStyle: {
								width: 0,
							},
							showSymbol: false,
							label: {
								show: true,
								position: "top",
							},
							areaStyle: {
								opacity: 0.8,
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "rgba(255, 191, 0)",
									},
									{
										offset: 1,
										color: "rgba(224, 62, 76)",
									},
								]),
							},
							emphasis: {
								focus: "series",
							},
							data: [220, 302, 181, 234, 210, 290, 150],
						},
					],
				};
				this.chart.setOption(option);
			},
		},
	};
</script>

<style lang="css" scoped>
</style>